<template>
    <div class="find-music-container">
        <topper :arr="btnGroup.arr"></topper>
        <div style="height: 15px"></div>
        <router-view v-slot="{ Component }">
            <keep-alive>
                <component :is="Component"/>
            </keep-alive>
        </router-view>
    </div>
</template>

<script>
import topper from "./global/topper.vue";
import {reactive} from "vue";
export default {
    name: "findMusic",
    components:{
        topper
    },
    setup() {
        let btnGroup = reactive({
            arr:[
                {name:'个性推荐', checked:true},
                {name:'歌单广场', checked:false},
                {name:'最新音乐', checked:false},
                {name:'流行歌手', checked:false},
            ]
        })

        return {
            btnGroup
        }
    }
}
</script>

<style scoped>
.find-music-container {
    padding: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
}
</style>